<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2025-07-02 21:37:05
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2025-07-02 22:53:56
 * @FilePath: /book-manage-angular/src/app/pages/book-detail/book-detail.component.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://githubook.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<div class="book-detail">
  <div class="page-header">
    <h1>图书详情</h1>
    <button nz-button nzType="default" (click)="goBack()">
      <i nz-icon nzType="arrow-left"></i>
      返回
    </button>
  </div>



  <div class="book-content" *ngIf="book.id !== 0">
    <div class="book-main">
      <div class="book-cover">
        <img [src]="book.coverUrl" [alt]="book.title" />
      </div>
      <div class="book-info">
        <h2>{{ book.title }}</h2>
        <div class="book-meta">
          <div class="meta-item">
            <span class="label">作者：</span>
            <span class="value">{{ book.author }}</span>
          </div>
          <div class="meta-item">
            <span class="label">分类：</span>
            <span class="value category">{{ book.category }}</span>
          </div>
          <div class="meta-item">
            <span class="label">评分：</span>
            <div class="rating">
              <div class="stars">
                <nz-rate [ngModel]="book.rating " nzAllowHalf></nz-rate>

              </div>
              <span class="rating-value">{{ book.rating }}</span>
            </div>
          </div>
          <div class="meta-item">
            <span class="label">销量：</span>
            <span class="value">{{ book.sales }}</span>
          </div>
          <div class="meta-item">
            <span class="label">价格：</span>
            <span class="value price">{{ book.price }}</span>
          </div>
        </div>

        <div class="book-actions">
          <button nz-button nzType="primary" nzIcon="shopping-cart">
            加入购物车
          </button>
          <button nz-button nzType="default" nzIcon="shopping">
            立即购买
          </button>
        </div>
      </div>
    </div>

    <div class="book-description">
      <h3>图书简介</h3>
      <p>{{ book.description || '暂无简介' }}</p>
    </div>
  </div>

  <div class="no-book" *ngIf="book.id === 0">
    <i nz-icon nzType="warning" nzTheme="outline"></i>
    <p>未找到图书信息</p>
    <button nz-button nzType="primary" (click)="goBack()">返回列表</button>
  </div>
  <div ngElse></div>
</div>
